<template>
	<view class="swiper-box">
		<swiper :indicator-dots="true" 
		indicator-color="rgba(255,255,255,0.3)"
		indicator-active-color="white"
		circular
		vertical
		:autoplay="true"
		:interval="3000" :duration="1000">
			<swiper-item>
				
					<image src="/static/images/pic1.png" mode="aspectFill"></image>
				
			</swiper-item>
			<swiper-item>
				<image src="/static/images/pic2.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/images/pic4.jpg" mode="aspectFill"></image>
				
			</swiper-item> 
			<swiper-item>
				<image src="/static/images/pic3.webp" mode="aspectFill"></image>
				
			</swiper-item>
		</swiper>
		
		<view class="img">
			<!-- image是uniapp中封装好的组件，其默认宽高分别为320px、240px -->
			<image src="/static/logo.png" class="logo"></image>
			<!-- 若未设置属性mode, 其默认值为scaleToFill,
			作用是不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 -->
			<image src="/static/images/pic1.png" mode="aspectFit" class="pic1"></image>
			<image src="/static/images/pic3.webp" mode="aspectFit" class="pic2"></image>
			<image src="/static/images/pic3.webp" mode="aspectFill" class="pic3"></image>
			<!-- 仅仅设置宽度，让高度自适应 -->
			<image src="/static/images/pic4.jpg" mode="widthFix" class="pic4"></image>
			<image src="/static/images/pic4.jpg" mode="heightFix" class="pic5"></image>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
swiper {
	width: 100vw; // vw即视图宽度, 100即占据视窗宽度的100%
	height: 29vh;
	border: 1rpx solid green;
	box-sizing: border-box;
	swiper-item {
		width: 100%;
		height: 100%;
		background-color: pink;
		image {
			width: 100%;
			height: 100%;
		}
	}
	// :nth-child(2n) 为所有偶数位置的 swiper-item 元素设置橙色背景
	swiper-item:nth-child(2n) { 
		background: orange;
	}
}
.logo {
	width: 72rpx;
	height: 72rpx;
}
.pic1 {
	width: 200px;
	height: 200px;
}
.pic2 {
	width: 200px;
	height: 200px;
	background-color: #ccc;
}
.pic3 {
	width: 200px;
	height: 200px;
	background-color: #ccc;
}
.pic4 {
	width: 300px;
}
.pic5 {
	height: 300px;
}
</style>
